<style scoped>
    .el-table .disabled-row {
        background: oldlace;
    }
</style>
<div class="content" id="team" v-cloak>
    <el-row>
        <el-col :span="12">
            <div class="grid-content bg-purple com_title">团队管理</div>
        </el-col>
    </el-row>
    
    <!-- table -->
    <div class="com_table_block mt20">
        <div class="table_header">
            <div class="l">团队管理</div>
            <div class="r">
                <el-button type="primary" size="medium" class="ml20" icon="el-icon-plus" @click="handleTeam(1)">新增团队</el-button>
            </div>
        </div>
        <div class="table_body">
            <el-table :data="datalist" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column prop="name" label="团队名称">
                </el-table-column>
                <el-table-column prop="code" label="团队编码">
                </el-table-column>
                <el-table-column label="可用状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 1" class="success">已启用</div>
                        <div v-if="scope.row.status != 1" class="red">已禁用</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div>
                            <el-button @click="handleTeam(2,scope.row)" type="primary" size="small">编辑</el-button>
                            <el-button v-if="scope.row.status==1?true:false" @click="hanleUse(scope.row)" type="danger" size="small" plain>禁用</el-button>
                            <el-button v-if="scope.row.status==0?true:false" @click="hanleUse(scope.row)" type="success" size="small">启用</el-button>
                            <el-button @click="hanleDelete(scope.row)" type="danger" size="small">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="common_pages">
            <el-pagination background 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage" 
                :page-size="pageSize" 
                layout="prev, pager, next, jumper" 
                :total="totalCount">
            </el-pagination>
        </div>
    </div>
    <!-- model弹出框 -->
    <el-dialog 
        width="500px"
        title="团队编辑" 
        :visible.sync="dialogTableVisible">
        <div class="com_model_main">
            <div class="com_model_block">
                <div class="left">团队名称<span class="red">*</span></div>
                <el-input class="inp" v-model="team.name" placeholder="请输团队名称"></el-input>
            </div>
            <div class="com_model_block">
                <div class="left">团队编码<span class="red">*</span></div>
                <el-input class="inp" v-model="team.code" placeholder="以team_开头、例如team_zxhy" :disabled="team.type==2?true:false"></el-input>
            </div>
            <div class="com_model_block">
                <div class="left">启用状态</div>
                <el-switch v-model="team.status" active-color="#409EFF"></el-switch>
            </div>
            <div class="btns">
                <el-button type="primary" @click="submitTeam"> 提交 </el-button>
            </div>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({
        el: '#team',
        data: function () {
            return {
                datalist:[],
                pageSize:30,
                totalCount:0,
                currentPage:1,
                dialogTableVisible:false,
                type:1,
                team:{
                    type:1,
                    _id:'',
                    name:'',
                    code:'',
                    status:true,
                },
            }
        },
        filters: {
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList(){
                util.ajax({
                    type:'get',
                    url:`${config.baseApi}api/v1/team/list?pageNo=${this.currentPage}&pageSize=${this.pageSize}`,
                    success:data => {
                        this.totalCount = data.data.totalNum;
                        this.datalist = data.data.datalist;
                    }
                })
            },
            submitTeam(){
                if (!this.team.name) {
                    popup.alert({ title: '请填写团队名称!' });
                    return;
                }
                if (!this.team.code) {
                    popup.alert({ title: '请填写团队编码!' });
                    return;
                }
                this.team.status = this.team.status ? 1 : 0;
                util.ajax({
                    url: `${config.baseApi}api/v1/team/handle`,
                    data: this.team,
                    success: data => {
                        this.dialogTableVisible = false;
                        this.getList();
                        popup.miss({title:'操作成功!'});
                    }
                })
            },
            handleTeam(type, item) {
                if (item) item = JSON.parse(JSON.stringify(item));
                if (item) {
                    this.team = item;
                    this.team.status = item.status == 1 ? true : false;
                } else {
                    this.team = {
                        type: 1,
                        _id: '',
                        name: '',
                        code: 'team_'+util.randomString(12),
                        status: true,
                    }
                }
                this.team.type = type;
                this.dialogTableVisible = true;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList();
            },
            hanleUse(item){
                let str = item.status == 1 ? '禁用' : '启用';
                popup.confirm({title: `确定${str}${item.name}团队吗？`, yes: () => {
                    util.ajax({
                        url: `${config.baseApi}api/v1/team/setStatus`,
                        data: {
                            _id: item._id,
                            status: item.status == 1 ? 0 : 1,
                        },
                        success: data => {
                            item.status = item.status == 1 ? 0 : 1,
                            popup.miss({ title: '操作成功!' });
                        }
                    })
                }})
            },
            hanleDelete(item){
                popup.confirm({title: `确定删除${item.name}团队吗？`, yes: () => {
                    util.ajax({
                        url: `${config.baseApi}api/v1/team/delete`,
                        data: {
                            _id: item._id,
                        },
                        success: data => {
                            this.getList();
                            popup.miss({ title: '操作成功!' });
                        }
                    })
                }})
            },
            tableRowClassName({ row, rowIndex }) {
                if (row.status != 1) {
                    return 'disabled-row';
                }
                return '';
            },
        }
    })
</script>